<!--
 * @Author: hq_deveolper hz858632@163.com
 * @Date: 2024-10-02 17:05:33
 * @LastEditors: hq_deveolper hz858632@163.com
 * @LastEditTime: 2024-10-03 14:17:18
 * @FilePath: \city-screen\src\views\JieXiangChuiShao\components\ChuiShaoShiXiangTongJi.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="area">
        <div class="area-top">
            <span>吹哨</span><span>&nbsp;{{ list[0].num }}</span><span>件</span>
        </div>
        <div class="area-main">
            <div class="area-item" v-for="(item, index) in list" :key="index" v-if="item.type != 0">
                <img src="../../../assets/images/jiexiangchuishao/richangitem.png" alt="">
                <div>
                    <span>{{ TitleList[Number(item.type) - 1] }}</span>
                    <span :style="{'color':colorList[Number(item.type) - 1]}">{{ item.num }}件</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { streetChuiShaoDB } from '@/api/index'
export default {
    data() {
        return {
            list: [],
            TitleList: ['日常事项', '重要事项', '重大事项', '其他事项'],
            colorList: ['#59D9FF', '#FEBB3B', ' #FE3B72', '#56DD9C']
        }
    },
    mounted() {
        // this.getData({streetId:undefined,type:undefined})
    },
    methods: {
        getData({streetId=undefined,type=undefined}) {
            streetChuiShaoDB.getNum({streetId,type}).then(res => {
                this.list = res.data
            })
        },
        getTitle() {
            return
        }
    }
}
</script>
<style lang="less" scoped>
.area {
    width: 487px;
    height: 235px;
    background: url(../../../assets//images/jiexiangchuishao/left-top-bg.png) no-repeat;
    background-size: 100% 100%;
    color: #fff;
    padding: 20px 60px;
    padding-top: 30px;

    .area-top {
        height: 45px;
        text-align: center;
        margin-bottom: 5px;
        background: linear-gradient(90deg, #0B2A51 0%, #42D0FE 47%, #0C2549 100%);
        opacity: 0.8;
        color: #fff;

        span {
            line-height: 45px;

            &:first-of-type {
                font-family: ShiShangZhongHeiJianTi;
                font-weight: 400;
                font-size: 22px;
                color: #FFFFFF;
                line-height: 23px;
                background: linear-gradient(0deg, #26FFED 0%, #20A8FF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            &:nth-last-child(2) {
                font-family: Noto Sans S Chinese;
                font-weight: bold;
                font-size: 24px;
                color: #BEF0FF;
                font-style: italic;
            }

            &:last-of-type {
                font-family: Noto Sans S Chinese;
                // font-weight: bold;
                font-size: 16px;
                color: #BEF0FF;
                font-style: italic;
            }
        }
    }

    .area-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0px 15px;

        .area-item {
            width: 50%;
            display: flex;
            align-items: center;

            img {
                width: 65px;
                height: 65px;
            }

            div {
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                font-size: 16px;
                justify-content: space-between;

                span {
                    &:first-of-type {
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: FFFFFF;
                    }

                    &:last-of-type {
                        margin-top: 5px;
                        font-family: Noto Sans S Chinese;
                        font-weight: bold;
                        font-style: italic;
                    }
                }
            }
        }
    }

}
</style>